<template>
  <div class="i-form-upload">
    <div v-if="value" class="__fileAlign">
      <div v-if="Array.isArray(value)" >
        <div class="__item __default-item" v-for="item,index in value" :key="index">
          <img :src="item">
        </div>
      </div>
      <div v-if="typeof value == 'string' "  class="__item __default-item">
        <img :src="value">
      </div>
    </div>
    <ModelFile v-model="fileList" :limit="limit" :width="width" :url="oploadUrl"  :images='images' :total='total' :groupValue="groupValue" @click="handlerData" @detele="deteleData" @handlerGroup="handlerGroup">
      <div class="__simulate">
        <!-- <i class="el-icon-delete"></i> -->
        <Icon class="ui-fa-plussign __icon-add" />
      </div>
    </ModelFile>
  </div>
</template>
<script type="text/javascript">
import ModelFile from './ModelFile.vue'
import config from './config.js'
import url from '@/plugins/url.js'
import { get_image,get_group,add_group,del_group, edit_group, move_edit,del_images } from '@/api/image'
export default {
  components: {
    ModelFile,
  },
  props: {
    value: [Array, Object, String],
    limit: {
      type: [Number, String],
      default: 8
    },
    url:{
      type:String,
      default:"/api/files/uploadFile"
    }
  },
  data() {
    return {
        width:'100px',
        fileList:[],
        oploadUrl:'',

        //配置
        total:0,        //分页总数
        images:[],      //元数据图片组
        groupValue:[],  //图文分组

        prams: {        //获取分组条件
          group_id: 0,
          page: 1
        },

    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    fileList:{
      handler(val,old){
        if(this.fileList.length ==1){
          this.$emit('input',this.fileList[0].file_name);
          return false;
        }
        var arrays = [];
        for(var key in this.fileList){
          arrays.push(this.fileList[key].file_name);
        }
        this.$emit('input',arrays);
      },
      deep:true
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.oploadUrl = url(this.url)
    // console.log(this.oploadUrl);

    /**
     * 获取图片源
     */
    this.getImages();
    /**
     * 获取图片分组
     */
    this.getGroup();
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {


    /**
     * 重新获取图片源
     * @param  {[type]} prams [description]
     * @return {[type]}       [description]
     */
    handlerData(prams){
      this.prams = prams;
      this.getImages();
    },

    /**
     * 图文分组处理
     * @param  {[type]} event [description]
     * @return {[type]}       [description]
     */
    handlerGroup(event){
        switch(event.type){
          case 'add':
            this.add_group(event.data);
          break;
          case 'edit':
            this.edit_group(event.data);
          break;
          case 'del':
            this.del_group(event.data);
          break;
          case 'move':
            this.move_edit(event.data);
          break;
        }
    },

    /***********************   数据处理   *************************/
    /**
     * 获取图片列表
     * @return {[type]} [description]
     */
    getImages() {
      /**
       * 执行API获取图片列表
       * @param  {[type]} response [description]
       * @return {[type]}          [description]
       */
      get_image(this.prams).then(response => {
        // console.log('获取图片列表',response);
        this.total = response.total ? response.total : 0;
        this.images = response.list;
      })
    },

    /**
     * 删除图文
     * @param  {[type]} data [description]
     * @return {[type]}      [description]
     */
    deteleData(data){
      del_images(data).then(response =>{
        this.$message({
          message: '删除图片成功！',
          type: 'success'
        });
        
        this.getImages();
      })
    },

    /**
     * 获取图片分组
     * @return {[type]} [description]
     */
    getGroup(){
      get_group().then(response => {
        if(response.length > 0){
          this.groupValue = response;
        }
      })
    },

    /**
     * 添加图片分组
     * @param {[type]} data [description]
     */
    add_group(data){
      add_group(data).then(response =>{
        this.$message({
          message: '添加图文分组成功！',
          type: 'success'
        });
        // 刷新分组
        this.getGroup();
      })
    },

    /**
     * 修改图片分组
     * @param  {[type]} data [description]
     * @return {[type]}      [description]
     */
    edit_group(data){
      edit_group(data).then(response =>{
        this.$message({
          message: '修改图文分组成功！',
          type: 'success'
        });
        // 刷新分组
        this.getGroup();
      })
    },

    /**
     * 删除图片分组
     * @param  {[type]} data [description]
     * @return {[type]}      [description]
     */
    del_group(data){
      del_group(data).then(response =>{
        this.$message({
          message: '删除图文分组成功！',
          type: 'success'
        });
        // 刷新分组
        this.getGroup();
      })
    },

    /**
     * 修改图文所属分组
     * @param  {[type]} data [description]
     * @return {[type]}      [description]
     */
    move_edit(data){
      move_edit(data).then(response =>{
        this.$message({
          message: '操作成功！',
          type: 'success'
        });
        // 重新刷新数据
        this.getImages();
      })
    }

  }
}

</script>
<style type="text/css" lang="scss">
.i-form-upload{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  .__simulate {
    background-color: rgba(200, 200, 200, .3);
    cursor: pointer;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .__icon-add {
      font-size: 40px;
    }
  }
  .__default-item{
    width:100px;
    height: 100px;
    border-radius: 10px;
    border-radius: 10px;
    float: left;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    float: left;
  }
  .__item{
    border:solid 1px rgba(200,200,200,.3);
    img{
      max-width: 100%;
      max-height: 100%;
    }
  }
}
</style>
